@CHARSET "ISO-8859-1";

a:link     {color:#FFCC00; text-decoration: none;}
a:visited  {color:#FFCC00; text-decoration: none;}
a:hover    {color:#FFCC00; text-decoration: underline;}

/* Overall holding div */
#holder		{background: #000000;
			background-image: url(images/votelogo.jpg);
			background-repeat: repeat-x;
			width: 1050px;
   			margin-right: auto;
   			border: 1px solid #000000;}
   			
/* Logo container div (page heading) */   			
#logo		{text-align: right;
			height: 150px;}
			
/* Content div */
#content	{padding-left:10px;
			padding-right:10px;
			padding-bottom:10px;
			text-align:left;}
			
#browser	{background: #DDDDDD;
			width: 340px;
			height: 75px;
			text-align: center;
			filter:alpha(opacity=80);
			color: #000000;}
			
#browser img{border: 0px;}

/* HTML body tag */
body 		{background: #333333;
			text-align:center;
			min-width:1024px;
			font-family: "Calibri", "Verdana", "Arial";
			color: #FFFFFF; }
			
small		{font-size: 7pt;}
			
/* links in the menu */			
div.link 	{margin-left:auto;
			margin-right:auto;
			border-left: 2px solid #000000;
			border-right: 2px solid #000000;
			border-bottom: 1px solid #222222;
   			background: #222222;
   			vertical-align: top;
   			padding-right:10px;
   			padding-left:10px;
   			display:inline;}

/* Steps in the navigation bar */  			
div.step	{border-left: 2px solid #000000;
			border-right: 2px solid #000000;
			border-bottom: 1px solid #444444;
   			background: #444444;
   			padding-right:10px;
   			padding-left:10px;
   			display:inline;
   			color: FFFFFF;}

/* Exception to give a different colour for the step we're currently at */
#navigation .active	{background: #FFFFFF;
					color: #000000;}

/* Navigation (steps) bar div */
#navigation	{background: #AAAAAA;
			height:20px;
			border-top: 1px solid #000000;
			border-bottom: 1px solid #000000;
   			vertical-align: bottom;
   			filter:alpha(opacity=50);
   			opacity:0.5;
   			text-align:right;
   			font-weight: 700;}

/* Menu bar (links) div */
#menu		{background: #FFDD88;
			height:20px;
			border-top: 1px solid #000000;
			border-bottom: 1px solid #000000;
			filter:alpha(opacity=50);
   			opacity:0.5;
   			font-weight: 700;}

/* html table */
table		{border-collapse:collapse;
			border-color:#777777;
			border-width: 1px;
			background: #555555;}

/* general table cell properties */
td			{padding-left: 5px;
			padding-right:5px;}

/* table cells that contain a question (1st column) */
td.question {background: #665544;
			min-width: 590px;
			width: 590px;}
			
td.question .hide	{float: right;}
td.question .qstring	{float: left;}

td.header .hide	{float: right;}
td.header 	{vertical-align: bottom;}
			
/* table row that contains the table header */
tr.header	{background: #444444;}

/* table cells that should have the same colour as the header*/
td.header	{background: #444444;
			width: 75px;			
			font-size: 11pt;}
			
td.c_namelink		{vertical-align: top;
					background: #444444;}			
td.c_description	{vertical-align: top;}

/* class code for table cells in the comparison table
mf = minus four = worst possible match (occurs on a -2 match with an important question, -2 * 2 = -4)
mt = minus two = terrible match (worst match or bad match on an important question)
mo = minus one = bad match
no = no opinion
po = plus one = good match
pt = plus two = perfect match (best match or a good match on an important question)
pf = plus four = best possible match (occurs on a +2 match with an important question, +2 * 2 = +4)

NOTE: do not preface these class definitions with 'td'. Just keep them as '.mf'
*/
.mf		{background: #EE7777;}
.mt		{background: #EE7777;}
.mo		{background: #FF8822;}
.no		{background: #AAAAAA;}
.po		{background: #88AAFF;}
.pt		{background: #55CC88;}
.pf		{background: #55CC88;}

.explanation{background-image: url(images/balloon.png);
			background-repeat: no-repeat;
			background-position:right top;}

/* form input (buttons, text fields) */
input		{border: 1px solid #000000;}

div.explain{float: right;
			vertical-align: bottom;
			color: #FFCC00;}

/* tooltip stuff */
#tt 	{position:absolute;
 		display:block;
 		width:300px;}
 
#tttop	{display:block;
		height:5px;
 		margin-left:5px;
 		overflow:hidden;
 		width:300px;}
 		
#ttcont {display:block;
 		padding:2px 12px 3px 7px;
 		margin-left:5px;
 		background:#666;
 		color:#fff;
 		text-align: justify;
 		width:300px;}

#ttbot 	{display:block;
		height:5px;
		margin-left:5px;
		overflow:hidden;
		width:300px;}
